<!-- pages/selected/selected.vue -->
<template>
	<view class="selected page-container">
		<view class="header">
			<text class="elegant-title">甄选系列</text>
			<text class="subtitle">SELECTED SERIES</text>
		</view>
		
		<!-- 作品展示区域 -->
		<view class="works-container" v-if="currentWorks.length > 0">
			<view v-for="(item, index) in currentWorks" 
				  :key="item.id" 
				  class="work-item"
				  @tap="viewWorkDetail(item)">
				<image class="work-image" 
					   :src="`http://localhost:8080/download/${item.images.split(',')[0]}`"
					   mode="aspectFill">
				</image>
				<view class="work-info">
					<text class="work-title">{{ item.title }}</text>
					<text class="work-desc">{{ item.description }}</text>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<text>暂无相关作品</text>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore && currentWorks.length > 0" @tap="loadMore">
			<text>加载更多</text>
		</view>
	</view>
</template>

<style>
.selected {
	min-height: 100vh;
	background-color: #000;
	padding: 20rpx;
}

.header {
	text-align: center;
	padding: 40rpx 0;
	margin-bottom: 30rpx;
}

.elegant-title {
	font-size: 36rpx;
	color: #fff;
	font-weight: 500;
	margin-bottom: 10rpx;
	display: block;
}

.subtitle {
	font-size: 24rpx;
	color: #888;
	text-transform: uppercase;
}

.works-container {
	padding: 0 20rpx;
}

.work-item {
	margin-bottom: 40rpx;
	background: #1a1a1a;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
}

.work-item:active {
	transform: scale(0.98);
}

.work-image {
	width: 100%;
	height: 800rpx !important;
	object-fit: cover;
	border-radius: 12rpx 12rpx 0 0;
}

.work-info {
	padding: 20rpx;
}

.work-title {
	font-size: 32rpx;
	color: #fff;
	font-weight: 500;
	margin-bottom: 10rpx;
	display: block;
}

.work-desc {
	font-size: 26rpx;
	color: #999;
	line-height: 1.6;
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;
	color: #666;
	font-size: 28rpx;
}

.load-more {
	text-align: center;
	padding: 30rpx 0;
	color: #888;
	font-size: 28rpx;
}
</style>

<script>
import API from '@/api/config.js'

export default {
	data() {
		return {
			currentWorks: [],
			hasMore: false,
			page: 1,
			pageSize: 10
		}
	},
	methods: {
		handleImageError(item) {
			item.images = 'default-work.png'
		},
		
		async loadWorks(refresh = true) {
			if (refresh) {
				this.page = 1
				this.currentWorks = []
			}
			
			uni.showLoading({ title: '加载中...' })
			
			try {
				const res = await uni.request({
					url: `${API.WORKS_LIST}?page=${this.page}&pageSize=${this.pageSize}`,
					method: 'GET'
				})
				
				if (res.data.code === 200 && Array.isArray(res.data.data)) {
					console.log('作品列表数据:', res.data)
					const works = res.data.data.map(item => ({
						id: item.id,
						title: item.title || '未命名作品',
						description: item.desc || '暂无描述',
						images: item.images || 'default-work.png',
						createUser: item.createUser
					}))
					
					if (refresh) {
						this.currentWorks = works
					} else {
						this.currentWorks = [...this.currentWorks, ...works]
					}
					
					this.hasMore = works.length >= this.pageSize
				}
			} catch (err) {
				console.error('加载作品错误:', err)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		loadMore() {
			if (!this.hasMore) return
			this.page++
			this.loadWorks(false)
		},
		
		viewWorkDetail(item) {
			console.log('跳转到详情，作品ID:', item.id)
			uni.navigateTo({
				url: `/pages/work-detail/work-detail?id=${item.id}`,
				fail: (err) => {
					console.error('跳转失败:', err)
					uni.showToast({
						title: '跳转失败',
						icon: 'none'
					})
				}
			})
		}
	},
	
	onLoad() {
		this.loadWorks(true)
	},
	
	onPullDownRefresh() {
		this.loadWorks(true)
		uni.stopPullDownRefresh()
	},
	
	onReachBottom() {
		this.loadMore()
	}
}
</script>